<template>
  <div class="container flow-column h100">
    <div class="container-main h100">
      <list-table-new
        @changeInput="changeInput"
        v-bind="tableSetting"
        ref="klTable"
      ></list-table-new>
    </div>
  </div>
</template>
<script>
import { queryAccidentList } from "@/api/operationManagement/dispatchManagement.js";
export default {
  data() {
    return {
      search: {},
      searchSort: [],
      tableSetting: {
        showCustomBtn: true,
        showFilterBtn: true,
        pageConfig: {
          pageCode: "dispatchManagement", //页面标识，用来存储过滤器以及自定义列的时候用
          userId: this.$store.getters.userInfo.id,
        },
        // 搜索框
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
            this.search = params;
            this.searchSort = sortStr;
          },
          queryData: {
            page: 1,
            pageSize: 15,
            equipmentType: "TRAN",
            disSearch: true,
          },
          searchArr: [
            {
              type: "select",
              label: "主要设备类型",
              model: "equipmentType",
              clearable: false,
              option: [
                { label: "主变", value: "TRAN" },
                { label: "线路", value: "LINE" },
              ],
            },
            {
              type: "organization",
              label: "设备管理单位",
              model: "deptManageName",
              idsStr: "deptManage",
              placeholder: "请选择或输入",
            },
            {
              type: "majorEquipment",
              label: "跳闸主变",
              model: "equipmentName",
              idsStr: "equipmentId",
              placeholder: "请选择或输入",
            },
            {
              type: "select",
              label: "电压等级",
              model: "voltageGrade",
              option: this.$store.getters["dirtData"]("dispatch_voltage_grade"),
            },
            {
              type: "select",
              label: "检修类型",
              model: "overhaulType",
              option: this.$store.getters["dirtData"]("dipatch_overhaul_type"),
            },
            {
              type: "datetimerange",
              label: "起止时间",
              model: "estimatedTime",
            },
          ],
        },
        tableDataObj: {
          tableArr: [],
          total: null,
        },
        // 过滤器的值
        filterFormData: {},
        // 过滤器的默认值
        defaultFilterData: {},
        userCustomData: [],
        // 新建下拉数据
        dropdownList: [
          { label: "主变", value: "TRAN" },
          { label: "线路", value: "LINE" },
        ],
        // 下拉方法
        addDropdown: {
          disabled: !this.$store.getters.isBtnAuth("addGroup"),
          content: "未授权的功能",
          method: (val) => {
            this.toAdd(val);
          },
        },
        // 表头
        column: [
          {
            label: "主要设备类型",
            prop: "equipmentType",
            sortable: true,
            formatter: (row) => {
              let types = this.$store.getters["dirtData"]("dispatch_type");
              let val = row.equipmentType;
              let obj = types.find((i) => i.value == val);
              return obj ? obj.label : val;
            },
          },
          {
            label: "设备管理单位",
            prop: "deptManageName",
            sortable: true,
          },
          {
            label: "跳闸主变",
            prop: "equipmentName",
            hide: false,
            sortable: true,
          },
          {
            label: "跳闸线路",
            prop: "equipmentName",
            hide: false,
            sortable: true,
          },
          {
            label: "电压等级",
            prop: "voltageGrade",
            sortable: true,
            formatter: (row) => {
              let types = this.$store.getters["dirtData"](
                "dispatch_voltage_grade"
              );
              let val = row.voltageGrade;
              let obj = types.find((i) => i.value == val);
              return obj ? obj.label : val;
            },
          },
          {
            label: "检修类型",
            prop: "overhaulType",
            sortable: true,
            formatter: (row) => {
              let types = this.$store.getters["dirtData"](
                "dipatch_overhaul_type"
              );
              let val = row.overhaulType;
              let obj = types.find((i) => i.value == val);
              return obj ? obj.label : val;
            },
          },
          {
            label: "开始时间",
            prop: "startTime",
            sortable: true,
          },
          {
            label: "结束时间",
            prop: "endTime",
            sortable: true,
          },
          {
            label: "停电时长(小时)",
            prop: "duration",
            sortable: true,
          },
          {
            label: "事故原因",
            prop: "accidentReason",
            sortable: true,
          },
          {
            label: "受影响线路",
            prop: "detstr",
            sortable: true,
            showTooltip: true,
          },
        ],
        // 表格方法
        tableMethods: {
          //点击行的方法
          rowClick: (val) => {
            // 可编辑
            let data = { accidentType: val.equipmentType, id: val.id };
            this.getDetails("edit", data);
          },
        },
      },
    };
  },
  created() {
    this.init();
    /* 添加监听事件 */
    window.addEventListener("storage", this.updateData);
  },
  beforeDestroy() {
    /* 删除监听事件 */
    window.removeEventListener("storage", this.updateData);
  },
  mounted() {
    this.$refs.klTable.getTableConfig();
    this.updateData();
  },
  methods: {
    init() {
      let equipmentType =
        this.$store.getters["dirtData"]("dispatch_type")[0].value;
      let data = {
        page: 1,
        pageSize: 15,
        equipmentType,
      };
      this.tableSetting.searchObj.queryData = data;
      this.tableSetting.searchObj.searchMethod(data, []);
    },
    //更新列表页的数据
    updateData() {
      this.$refs.klTable.searchData();
    },
    // 查询表格数据
    async getTableData(params, sortStr) {
      if (params.equipmentType == "TRAN") {
        this.tableSetting.column[2].hide = false;
        this.tableSetting.column[3].hide = true;
        this.tableSetting.column[10].hide = true;
      } else if (params.equipmentType == "LINE") {
        this.tableSetting.column[2].hide = true;
        this.tableSetting.column[3].hide = false;
        this.tableSetting.column[10].hide = false;
      }
      let queryData = Object.assign({}, params);
      if (sortStr.length) {
        queryData.orders = sortStr;
      }
      if (queryData.estimatedTime) {
        queryData.startTime = queryData.estimatedTime[0];
        queryData.endTime = queryData.estimatedTime[1];
      }
      delete queryData.estimatedTime;
      let { data } = await queryAccidentList(queryData);
      this.$set(this.tableSetting, "tableData", data.list || []);
      this.$set(this.tableSetting, "totalNumber", data.total || 0);
    },
    //输入框改变
    changeInput(model, searchForm) {
      this.tableSetting.searchObj.queryData = searchForm;
      this.search = searchForm;
    },
    // 跳转至详情页,携带参数分别为：数据、页面类型、工作票状态、工作票类型
    getDetails(pageType, accidentVal) {
      const { href } = this.$router.resolve({
        name: "accidentTripRecordDetails",
        query: {
          pageType: pageType ? pageType : "",
          accidentVal: accidentVal ? JSON.stringify(accidentVal) : "",
        },
      });
      window.open(href, "_blank");
    },
    // 新建
    async toAdd(val) {
      let data = { accidentType: val.value };
      this.getDetails("add", data);
    },
  },
};
</script>
<style lang="less" scoped>
.flow-column {
  display: flex;
  flex-flow: column nowrap;
}
/deep/ .list-table-search--item:first-child .item-label::before {
  content: "*";
  color: #f56c6c;
  padding-right: 4px;
}
/deep/ .list-table-search--item:first-child .el-icon-circle-close {
  display: none;
}
</style>